{% extends 'layout/basic.html' %}
{% load static %}
{% block title %} 用户短信登陆{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
    <style>
        .err-msg {
            color: red;
            position: absolute;
        }

        #form-error {
            color: red;
            position: absolute;

        }
    </style>
{% endblock %}


{% block content %}
    <div class="account">
        <div class="title">短信登陆</div>
        <form method="post" novalidate id="form-login">
            {% csrf_token %}
            {% for field in form %}
                {% if field.name == 'code' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <div class="clearfix">
                            <div class="col-xs-7" style="padding-left: 0">{{ field }} <span class="err-msg"></span>
                                <span id="form-error">{{ field.errors.0 }}</span>
                            </div>
                            <div class="col-xs-5" style="padding-right: 0"><input type="button"
                                                                                  class="btn btn-default"
                                                                                  id="btnSms" value="点此获取验证码"></div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }} <span class="err-msg"></span>
                    </div>
                {% endif %}
            {% endfor %}
            {#  通过ajax 请求发送 #}
        <div class="pull-right"><a href="{% url 'login' %}">手机/邮箱登录?</a></div>
            <button type="button" class="btn btn-primary" id="btnLogin">登录</button>
        </form>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            bindClickSms(); // 发送短信 验证码
            bindBtnLogin(); //向后端发送请求
        })

        function bindClickSms() {
            $('.err-msg').text(''); // 初始化错误信息
            $('#btnSms').click(function () {
                // 点击发送ajax 请求给后端
                $.ajax({
                    url: '{% url 'send_sms' %}',
                    type: 'get',
                    data: {
                        'mobile_phone': $('#id_mobile_phone').val(),
                        'type': 'login',// 短信的模板类型
                    }, success: function (data) {
                        // 发送成功 则开始倒计时
                        if (data.status) {
                            sendSmsRemind();
                        } else {
                            // 发送失败 展示错误信息
                            $.each(data.error, function (key, value) {
                                // key error 字典里的key 即字段名
                                $('#id_' + key).next().text(value[0])
                                setTimeout(function () {
                                    $('.err-msg').text('');
                                }, 1000)
                            })
                        }
                    }
                })
            })
        }

        // 倒计时
        function sendSmsRemind() {
            var $smsBtn = $('#btnSms')
            $smsBtn.prop('disabled', true) // 禁用发送短信按钮
            var time = 60
            // 当已发送短信时，按钮的文字说换成时间提示
            var remind = setInterval(function () {
                $smsBtn.val(time + '秒后获取验证码')
                time = time - 1
                // 判断时间过了60秒则清除锁定
                if (time < 1) {
                    clearInterval(remind); // 清除计时
                    $smsBtn.val('点此获取验证码').prop('disable', false)
                }
            }, 1000)

        }

        // ajax 发送登录请求
       function bindBtnLogin() {
        $('#btnLogin').click(function () {
            $('.err-msg').empty(); // 初始化错误信息
            let loginData = $('#form-login').serialize() // 获取form表单下所有的数据信息 + csrf token
            $.ajax({
                url: '{% url 'login_sms' %}',
                type: 'post',
                data: loginData,
                success:function (data) {
                    if (data.status){
                        // 验证成功，跳转登陆界面
                        location.href = data.url
                    }else {
                        // 验证失败，前面输入框显示错误信息的
                         $.each(data.error, function (key, value) {
                                // key error 字典里的key 即字段名
                                $('#id_' + key).next().text(value[0])
                               setTimeout(function () {
                                    $('.err-msg').text('');
                                }, 2000)
                            })
                    }
                }
            })
        })
    }
    </script>
{% endblock %}